import React from 'react';
import { Card, Row, Col } from 'antd';
import { 
  CompressOutlined, 
  ScissorOutlined, 
  SwapOutlined, 
  PictureOutlined, 
  ScanOutlined, 
  FontSizeOutlined 
} from '@ant-design/icons';
import Link from 'next/link';
import Layout from '../../components/layout/Layout';
import styles from '../../styles/ToolsPage.module.css';

const ImageToolsPage = () => {
  const imageTools = [
    {
      id: 'compress',
      title: '图片压缩',
      icon: <CompressOutlined />,
      description: '在保持画质的同时减小图片体积，加快网页加载速度',
      link: '/image-tools/compress'
    },
    {
      id: 'crop',
      title: '图片裁剪',
      icon: <ScissorOutlined />,
      description: '自由裁剪图片大小，调整比例，突出重点内容',
      link: '/image-tools/crop'
    },
    {
      id: 'convert',
      title: '图片格式转换',
      icon: <SwapOutlined />,
      description: '在JPG、PNG、WEBP等格式之间转换，满足不同需求',
      link: '/image-tools/convert'
    },
    {
      id: 'watermark',
      title: '图片水印处理',
      icon: <PictureOutlined />,
      description: '添加或移除图片水印，保护或清理图片',
      link: '/image-tools/watermark'
    },
    {
      id: 'ocr',
      title: 'OCR文字识别',
      icon: <ScanOutlined />,
      description: '从图片中提取文字内容，支持多种语言',
      link: '/image-tools/ocr'
    },
    {
      id: 'text-replace',
      title: '图像文字替换',
      icon: <FontSizeOutlined />,
      description: '替换图片中的文字内容，无需专业设计软件',
      link: '/image-tools/text-replace'
    }
  ];

  return (
    <Layout title="图片工具 - 在线工具平台" description="高效便捷的在线图片处理工具">
      <div className={styles.toolsHeader}>
        <div className={styles.container}>
          <h1 className={styles.pageTitle}>图片工具</h1>
          <p className={styles.pageDescription}>
            提供多种在线图片处理功能，让图像处理变得简单高效
          </p>
        </div>
      </div>

      <div className={styles.toolsContent}>
        <div className={styles.container}>
          <Row gutter={[24, 24]}>
            {imageTools.map(tool => (
              <Col xs={24} sm={12} md={8} key={tool.id}>
                <Link href={tool.link}>
                  <Card className={styles.toolCard} hoverable>
                    <div className={styles.toolIcon}>{tool.icon}</div>
                    <h3 className={styles.toolTitle}>{tool.title}</h3>
                    <p className={styles.toolDescription}>{tool.description}</p>
                  </Card>
                </Link>
              </Col>
            ))}
          </Row>
        </div>
      </div>
    </Layout>
  );
};

export default ImageToolsPage; 